<template>
  <div>
    <h2>v-model的原理</h2>
    <!-- <input type="text" :value="uname" @input="onInput" /> -->
    <!-- 在template区域,如果使用事件对象,则使用$event -->
    <!-- <input type="text" :value="uname" @input="uname = $event.target.value" /> -->
    <!-- 对于输入框来说:v-model相当于 :value + @input -->
    <!-- <input
      type="checkbox"
      :checked="flag"
      @change="flag = $event.target.checked"
    /> -->
    <!-- 对于单个复选框来说: v-model相当于 :checked + @change -->

    <!-- 使用子组件 ,并实现v-model的特性-->
    <my-input
      :value="uname"
      @input="
        (val) => {
          uname = val;
        }
      "
    ></my-input>
  </div>
</template>

<script>
import MyInput from "./components/MyInput.vue";

export default {
  components: { MyInput },
  data() {
    return {
      uname: "zhangsansan",
      flag: true,
    };
  },
  // methods: {
  //   onInput(e) {
  //     this.uname = e.target.value;
  //   },
  // },
};
</script>

<style>
</style>